<!DOCTYPE HTML>
<html lang="zh-CN">

	<head>
		<meta name="generator" content="Hexo 3.9.0">
		<!--Setting-->
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<meta http-equiv="Cache-Control" content="no-siteapp">
		<meta http-equiv="Cache-Control" content="no-transform">
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta name="apple-mobile-web-app-capable" content="波波老师的博客">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no,email=no,adress=no">
		<meta name="browsermode" content="application">
		<meta name="screen-orientation" content="portrait">
		<meta name="theme-version" content="1.2.3">
		<meta name="root" content="/">

		<!--SEO-->
		<meta name="keywords" content="Docker">
		<meta name="description" content="波波老师">
		<meta name="robots" content="all">
		<meta name="google" content="all">
		<meta name="googlebot" content="all">
		<meta name="verify" content="all">
		<!--Title-->
		<title>波波老师的博客 | 文章</title>
		<link rel="alternate" href="/atom.xml" title="波波老师的博客" type="application/atom+xml">
		<link rel="icon" href="static/picture/favicon2.png">
		<link rel="stylesheet" href="static/css/bootstrap.min.css">
		<link rel="stylesheet" href="static/css/jquery.fancybox.css">
		<link rel="stylesheet" href="static/css/font-awesome.min.css">
		<link rel="stylesheet" href="static/css/style.css">



		<script>
			var _hmt = _hmt || [];
			(function() {
				var hm = document.createElement("script");
				hm.src = "https://hm.baidu.com/hm.js?04983d21727b02deb6771184cf02f865";
				var s = document.getElementsByTagName("script")[0];
				s.parentNode.insertBefore(hm, s);
			})();
		</script>

		<style>
			.center-block{
				width: 100%;
			}
		</style>

	</head>

</html>
<!--[if lte IE 8]>
<style>
    html{ font-size: 1em }
</style>
<![endif]-->
<!--[if lte IE 9]>
<div style="ie">你使用的浏览器版本过低，为了你更好的阅读体验，请更新浏览器的版本或者使用其他现代浏览器，比如Chrome、Firefox、Safari等。</div>
<![endif]-->

<body>
<div id="app">
	<nav class="main-navigation">
		<div class="container">
			<div class="row clearfix">
				<div class="col-md-12 column">
					<nav class="navbar navbar-default" style="background-color:#fff;border:0;margin-bottom:0" role="navigation">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                            <span class="sr-only">切</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
							<a class="logo" href="index.html">
								<img src="static/picture/favicon2.png" />波波老师的博客
							</a>
						</div>

						<div class="collapse navbar-collapse" style="border:0;" id="navbar-collapse-1">
							<ul class="nav navbar-nav">

								<li>
									<a href="index.html">
										<i class="fa fa-home"></i> 首页
									</a>
								</li>

								<li>
									<a href="archives.html">
										<i class="fa fa-sort"></i> 归档
									</a>
								</li>

								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown"
									   data-hover="dropdown">
										<i class="fa fa-fire"></i>
										文章分类
										<strong class="caret"></strong>
									</a>
									<ul class="dropdown-menu">
										<li v-for="(typeStatistics, i) in articleTypeStatistics">
											<a :href="'blogsort.html?' + typeStatistics.id + '###' + typeStatistics.typeName" target="_blank">
												<i class="fa "></i>{{typeStatistics.typeName}}({{typeStatistics.count}})
											</a>
										</li>
									</ul>
								</li>
								<li>
									<a href="/about.html">
										<i class="fa fa-user"></i> 关于我
									</a>
								</li>
							</ul>
						</div>
					</nav>
				</div>
			</div>
		</div>
	</nav>

	<a href="https://gitee.com/colinWu_java/interview" target="_blank">
		<img style="position: absolute; width:100px; top: 0; left: 0; border: 0;" src="static/picture/fork-me.png" alt="Fork me on GitHub">
	</a>

	<section class="content-wrap">
		<div class="container">
			<div class="row">

				<main class="col-md-12 main-content m-post">

					<!--广告图片栏位-->
					<div class="ad">
						<div class="row">
							<div class="col-md-12">
								<a :href="paramObj.ad_url" rel="nofollow" target="_blank">
									<img class="img-responsive center-block" :src="paramObj.ad_1002_url" title="阿里云活动">
								</a>
							</div>
						</div>
					</div>

					<p id="process"></p>
					<article class="post">
						<div class="post-head">
							<h1>
								{{articleDetail.articleName}}
        					</h1>
							<div class="post-meta">
								<span class="categories-meta fa-wrap">
									<i class="fa fa-folder-open-o"></i>
									<a class="category-link" href="">
										{{articleDetail.articleTypes.typeName}}
									</a>
								</span>
								<span class="fa-wrap">
									<i class="fa fa-tags"></i>
									<span class="tags-meta">
											<a class="tag-link" href="">
												{{articleDetail.articleTag}}
											</a>
									</span>
								</span>

								<span class="fa-wrap">
									<i class="fa fa-clock-o"></i>
									<span class="date-meta">
										{{articleDetail.updateTime}}
									</span>
								</span>

								<span class="fa-wrap">
									<i class="fa fa-child"></i>
									<span class="date-meta">
										{{articleDetail.articleReadCount}}
									</span>
								</span>

								<span class="fa-wrap">
									<i @click="likeRate" class="fa fa-thumbs-up"></i>
									<span class="date-meta">
										{{articleDetail.articleStarNum}}
									</span>
								</span>
							</div>
						</div>

						<div class="post-body post-content" id="container">
							<span v-html="articleDetail.articleContent"></span>
							<div style="border-bottom:1px solid #ebebeb; margin-top: 60px;margin-bottom: 30px;text-align: center;font-size: 30px; color: red">
								欢迎来到王者荣耀！！！
							</div>
							<h2>相关文章</h2>
							<span v-if="dependentArticles.length > 0">
								<ul v-for="(article, i) in dependentArticles">
									<li>
										<a target="_blank" :href="'blogdetail.html?' + article.id">{{article.articleName}}</a>
									</li>
								</ul>
							</span>
							<span v-else>
								暂无数据
							</span>
						</div>
						<!-- 评论模块-start -->
						<div>
							<div @click="inputFocus" class="my-reply">
								<el-avatar class="header-img" :size="40" src="http://115.159.88.63:9090/java0715-test/1672210523799.jpg"></el-avatar>
								<div class="reply-info" >
									<div tabindex="0"
										 contenteditable="true"
										 id="replyInput"
										 spellcheck="false"
										 placeholder="输入评论..."
										 class="reply-input"
										 @input="onDivInput($event)">
									</div>
									<el-button class="reply-btn" size="medium" @click="sendComment" type="primary">发表评论</el-button>
								</div>
							</div>
							<div v-for="(item,i) in comments" :key="i" class="author-title reply-father">
								<el-avatar class="header-img" :size="40" src="http://115.159.88.63:9090/java0715-test/1672210523799.jpg"></el-avatar>
								<div class="author-info">
									<span class="author-name">{{item.nickname}}</span>
									<span class="author-time">{{item.createTime}}</span>
								</div>
								<div class="talk-box">
									<p>
										<span class="reply">{{item.content}}</span>
									</p>
								</div>
							</div>
						</div>
						<!-- 评论模块-end -->



						<div class="post-footer">
							<div class="col-sm-10">
								<div>
									<b>本文链接</b>：
									<a :href="thisArticleUrl" target="_blank">{{articleDetail.articleName}}</a>
								</div>
								<div>
									转载声明：本博客由波波老师创作。可自由转载、引用，但需署名作者且注明文章出处。如转载至微信公众号，请在文末添加作者微信二维码。
								</div>
							</div>
							<div class="col-sm-2">
								<img :src="paramObj.user_weixin_url" width=100%/>
							</div>
						</div>

					</article>
				</main>

			</div>
		</div>
	</section>
	<footer class="main-footer">
		<div class="container">
			<div class="row">
			</div>
		</div>
	</footer>

	<a id="back-to-top" class="icon-btn hide">
		<i class="fa fa-chevron-up"></i>
	</a>

	<div class="copyright">
		<div class="container">
			<div class="row">
				<div class="col-sm-12">
					<span>Copyright &copy; 2021 - 2012
                </span> |
					<span>
                    Powered by Colin
                </span> |
					<span>
                    鄂ICP备20013491号-1
                </span>
				</div>
			</div>
		</div>
	</div>
</div>

	<script src="static/js/jquery.min.js"></script>
	<script src="static/js/bootstrap.min.js"></script>
	<script src="static/js/bootstrap-hover-dropdown.min.js"></script>
	<script src="static/js/search.js"></script>
	<script async src="static/js/busuanzi.pure.mini.js"></script>
	<script src="static/js/app.js"></script>
	<script src="static/js/jquery.fancybox.js"></script>
<!--&lt;!&ndash; 引入VUE：本地引入：前端js框架 &ndash;&gt;-->
<!--<script src="static/js/vue.js"></script>-->
<!--&lt;!&ndash; 引入Axios：CDN外部引入：用来做请求发送的 &ndash;&gt;-->
<!--<script src="static/js/plugins/axios/dist/axios.js"></script>-->
<!--&lt;!&ndash; 引入ElementUI：css样式 &ndash;&gt;-->
<!--<link rel="stylesheet" href="static/js/plugins/element-ui/lib/theme-chalk/index.css">-->
<!--&lt;!&ndash; 引入ElementUI：组件库 &ndash;&gt;-->
<!--<script src="static/js/plugins/element-ui/lib/index.js"></script>-->
<!--&lt;!&ndash; 引入共用js文件 &ndash;&gt;-->
<!--<script src="static/js/common.js"></script>-->
<!-- ----引入在线地址------------------------ -->
<!-- 引入VUE -->
<script src="static/js/vue.js"></script>
<!-- CDN引入外部资源axios:用来做请求发送的 -->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入共用js文件 -->
<script src="static/js/common.js"></script>

	<script type="text/javascript">
		//使用Vue
		let app = new Vue({
			//挂载点
			el: '#app',
			//数据区
			data: {

				//1.获取文章的详情
				articleDetail: {},

				//2.根据文章类型 -统计-下面文章的数量
				articleTypeStatistics: [],

				//3.--wx社交所有参数信息
				paramObj: {},

				//4.
				dependentArticles: [],


				thisArticleUrl: '',


				//---------------评论--------------------
				//评论数据
				comment: {
					content: "",
					articleId: null,
					userId: null,
					nickname: '',

				},
				comments:[]
			},
			//编写函数方法的地方
			methods: {

				//1.获取文章列表数据
				getArticleDetail() {
					let url = location.href;//从url上获取id
					let articleId = url.substring(url.lastIndexOf("?") + 1);
					this.$http.get("/article/" + articleId).then(res => {
						this.articleDetail = res.data;
						//页面一刷新就加1 ===浏览量
						this.articleDetail.articleReadCount = this.articleDetail.articleReadCount + 1;
						this.addSubmit();
					}).catch(error => {
						this.$message.error("系统繁忙，请稍后重试[400，404]")
					})
				},


				//点赞
				likeRate(){
					let url = location.href;//从url上获取id
					let articleId = url.substring(url.lastIndexOf("?") + 1);
					this.$http.get("/article/" + articleId).then(res => {
						this.articleDetail = res.data;
						this.articleDetail.articleStarNum = this.articleDetail.articleStarNum+1;
						this.addSubmit();
					}).catch(error => {
						this.$message.error("系统繁忙，请稍后重试[400，404]")
					})
				},


				//提交新增表单数据
				addSubmit() {
					this.$http.put("/article", this.articleDetail).then(result => {
						if(result.data.success){
						}else{
							//打印后端的错误信息
							this.$message.error(result.data.message);
						}
					}).catch(res => {
						this.$message.error("系统繁忙，请稍后重试")
					});
				},


				//2.获取qq--wx社交所有参数信息
				getAllParam() {
					this.$http.get('/param/getAllParam').then(result => {
						this.paramObj = result.data;
					}).catch(error => {
						console.log(error);
					});

				},

				//5.统计每个文章分类下面文章的数量
				getArticleTypeStatistics() {
					this.$http.get("/article/statisticsByArticleType").then(res=>{
						this.articleTypeStatistics = res.data;//typeName,count
					}).catch(res=>{
						this.$message.error("系统繁忙，请稍后重试【400,404】");
					})
				},

				//获取相关性文章列表数据
				getDependentArticles() {
					let url = location.href;
					let articleId = url.substr(url.indexOf("?")+1);
					this.$http.get('/article/getDependentArticles/' + articleId).then(result => {
						this.dependentArticles = result.data;
					}).catch(error => {
						console.log(error);
					});
				},





//---------------------------------------------------------------------------------------
				//评论方法
				//1.点击输入评论的输入框触发的方法
				inputFocus(){
					var replyInput = document.getElementById('replyInput');
					replyInput.style.padding= "8px 8px"
					replyInput.style.border ="2px solid blue"
				},
				//2.发送评论
				sendComment(){
					if(!this.comment.content){
						this.$message({
							showClose: true,
							type:'warning',
							message:'评论不能为空'
						})
					}else{
						let url = location.href;
						let articleId = url.substr(url.indexOf("?") + 1);
						this.comment.articleId = articleId;
						//this.comment.userId = 122;
						let uuid = localStorage.getItem("uuid");
						if(!uuid){
							uuid = this.createUuid();
							localStorage.setItem("uuid",uuid);
						}
						this.comment.nickname = "游客：" + uuid;
						this.$http.put("/comment",this.comment).then(res=>{
							if(res.data.success){
								this.$message.success("评论发送成功");
								this.getComments();

							}
						}).catch(res=>{
							this.$message.error("系统繁忙，请稍后重试");
						})
					}
				},
				//3.获取输入的评论
				onDivInput: function(e) {
					this.comment.content = e.target.innerHTML;
				},
				getComments(){
					let url = location.href;
					let articleId = url.substr(url.indexOf("?") + 1);
					this.$http.post('/comment/'+articleId).then(result => {
						this.comments = result.data;

					}).catch(error => {
						this.$message.error("系统繁忙，请稍后重试");
					});
				},


				//4.时间处理
				dateStr(date){
					//获取js 时间戳
					var time=new Date().getTime();
					//去掉 js 时间戳后三位，与php 时间戳保持一致
					time=parseInt((time-date)/1000);
					//存储转换值
					var s;
					if(time<60*10){//十分钟内
						return '刚刚';
					}else if((time<60*60)&&(time>=60*10)){
						//超过十分钟少于1小时
						s = Math.floor(time/60);
						return  s+"分钟前";
					}else if((time<60*60*24)&&(time>=60*60)){
						//超过1小时少于24小时
						s = Math.floor(time/60/60);
						return  s+"小时前";
					}else if((time<60*60*24*30)&&(time>=60*60*24)){
						//超过1天少于30天内
						s = Math.floor(time/60/60/24);
						return s+"天前";
					}else{
						//超过30天ddd
						var date= new Date(parseInt(date));
						return date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
					}
				},

				//前端生成key - 就用来传递到后端来保存或获取redis图形验证码
				createUuid(){
					var s = [];
					var hexDigits = "0123456789abcdefghi";
					for (var i = 0; i < 36; i++) {
						s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
					}
					s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
					s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
					s[8] = s[13] = s[18] = s[23] = "-";

					var uuid = s.join("");
					return uuid;
				}
			},


			//钩子函数
			mounted() {
				//获取文章详情
				this.getArticleDetail();

				//统计每个文章分类下面文章的数量
				this.getArticleTypeStatistics();
				//获取所有参数信息
				this.getAllParam();

				//获取相关文章数据
				this.getDependentArticles();

				//获取评论
				this.getComments();


			}
		})
	</script>
<script type="text/javascript">
	const clickoutside = {
		// 初始化指令
		bind(el, binding, vnode) {
			function documentHandler(e) {
				// 这里判断点击的元素是否是本身，是本身，则返回
				if (el.contains(e.target)) {
					return false;
				}
				// 判断指令中是否绑定了函数
				if (binding.expression) {
					// 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
					binding.value(e);
				}
			}
			// 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
			el.vueClickOutside = documentHandler;
			document.addEventListener('click', documentHandler);
		},
		update() {},
		unbind(el, binding) {
			// 解除事件监听
			document.removeEventListener('click', el.vueClickOutside);
			delete el.vueClickOutside;
		},
	};

</script>

<style scoped lang="css">
	.my-reply {
		padding: 10px;
		background-color: #fafbfc;
	}

	.my-reply .header-img {
		display: inline-block;
		vertical-align: top;
	}

	.my-reply .reply-info {
		display: inline-block;
		margin-left: 5px;
		width: 90%;
	}

	@media screen and (max-width: 1200px) {
		.my-reply .reply-info {
			width: 80%;
		}
	}

	.my-reply .reply-info .reply-input {
		min-height: 20px;
		line-height: 22px;
		padding: 10px 10px;
		color: #ccc;
		background-color: #fff;
		border-radius: 5px;
	}

	.my-reply .reply-info .reply-input:empty:before {
		content: attr(placeholder);
	}

	.my-reply .reply-info .reply-input:focus:before {
		content: none;
	}

	.my-reply .reply-info .reply-input:focus {
		padding: 8px 8px;
		border: 2px solid #00f;
		box-shadow: none;
		outline: none;
	}

	.my-reply .reply-btn-box {
		height: 25px;
		margin: 10px 0;
	}

	.my-reply .reply-btn-box .reply-btn {
		position: relative;
		float: right;
		margin-right: 15px;
	}

	.author-title:not(:last-child) {
		border-bottom: 1px solid rgba(178, 186, 194, 0.3);
	}

	.author-title {
		margin-top: 1rem;
		padding: 10px;
	}

	.author-title .header-img {
		display: inline-block;
		vertical-align: top;
	}

	.author-title .author-info {
		display: inline-block;
		margin-left: 5px;
		width: 60%;
		height: 40px;
		line-height: 20px;
	}

	.author-title .author-info > span {
		display: block;
		cursor: pointer;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.author-title .author-info .author-name {
		color: #000;
		font-size: 18px;
		font-weight: bold;
	}

	.author-title .author-info .author-time {
		font-size: 14px;
	}

	.author-title .icon-btn {
		width: 30%;
		padding: 0 !important;
		float: right;
	}

	@media screen and (max-width: 1200px) {
		.author-title .icon-btn {
			width: 20%;
			padding: 7px;
		}
	}

	.author-title .icon-btn > span {
		cursor: pointer;
	}

	.author-title .icon-btn .iconfont {
		margin: 0 5px;
	}

	.author-title .talk-box {
		margin: 0 50px;
	}

	.author-title .talk-box > p {
		margin: 0;
	}

	.author-title .talk-box .reply {
		font-size: 16px;
		color: #000;
	}
</style>


</body>

</html>